<template>
  <div>
       <div class="head">
      <div class="img">
        <img src="../../assets/NJUST.jpeg" />
      </div>
      <div class="person">
        <img src="../../assets/用户名.png" />
       <li class="li1"><router-link to="/person"><span>个人主页</span></router-link></li>
      </div>
    </div>

    <div class="crumbs">
        <nav>
            <a href="#">首页</a><span>/</span>
            <a href="#">XXXX标准</a><span>/</span>
            <a href="#">XXXX项目</a>
        </nav>
    </div>
  <div class="equipment-list">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="设备计划购入清单" name="first">
        <el-table :data="equipmentData" style="width: 100%">
          <el-table-column prop="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="standardName" label="标准名称"></el-table-column>
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="standardNumber" label="标准编号（含年号）及条款号"></el-table-column>
          <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
          <el-table-column prop="solution" label="解决方案"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-pagination background layout="prev, pager, next" :total="40" class="pagination-centered"> </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="样品清单" name="second">
        <!-- 样品清单内容 -->
        <el-table :data="sampleData" style="width: 100%">
          <el-table-column prop="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="standardName" label="标准名称"></el-table-column>
          <el-table-column prop="projectName" label="标准编号（含年号）"></el-table-column>
          <el-table-column prop="standardNumber" label="样品名称"></el-table-column>
          <el-table-column prop="equipmentName" label="生产厂家"></el-table-column>
          <el-table-column prop="speciModel" label="规格型号"></el-table-column>
          <el-table-column prop="solution" label="申请需求（文本）"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
              <span>|</span>
              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-pagination background layout="prev, pager, next" :total="40" class="pagination-centered"> </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
        activeTab: 'first',
      equipmentData: [
        { index: 1, standardName: '医用防护口罩', projectName: '过滤效率', standardNumber: 'GB 19083-2023 4.3', equipmentName: '过滤效率测试仪', solution: '方案A', status: '计划采购' },
        { index: 2, standardName: '医用防护口罩', projectName: '呼吸阻力', standardNumber: 'GB 19083-2023 4.4', equipmentName: '呼吸阻力测试仪', solution: '方案B', status: '采购完成' },
        // 更多数据...
      ],
      sampleData: [
        { index: 1, standardName: '医用防护口罩', projectName: 'GB 19083-2023', standardNumber: '一次性使用防护口罩', equipmentName: '南京一公司', speciModel: '/', solution: '', status: '计划采购' },
        { index: 2, standardName: '医用防护口罩', projectName: 'GB 19083-2023', standardNumber: '一次性使用防护口罩', equipmentName: '苏州一公司', speciModel: '/', solution: '', status: '采购完成' },
        // 更多数据...
      ],

      pageSize: 10,
      currentPage: 1
    };
  },
  computed: {
    filteredData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1); // 删除当前行
    },
    handleEdit(row) {
      // 这里可以打开一个模态对话框来编辑行数据
      // 或者使用 Element UI 的 <el-dialog> 组件来实现编辑功能
      console.log('编辑行数据:', row);
   }
  }
};
</script>

<style scoped>
  .head {
    width: 100vw;
    background-color: #abe0f3;
    height: 6vh;
  }

    .head .img {
      height: 100%;
      float: left;
    }

      .head .img img {
        height: 100%;
      }

    .head .person {
      float: right;
      height: 42%;
    }

      .head .person img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .person li {
        margin-top: 20px;
        margin-right: 70px;
        display: block;
        float: left;
        font-size: 18px;
      }

.crumbs {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  background-color: #f0f0f0; /* 背景颜色 */
  padding: 10px 20px; /* 内边距 */
}

.crumbs nav a {
  margin-left: 15px;
  text-decoration: none;
  color: #333;
}

.equipment-list {
  padding: 20px;
}

  .pagination-centered {
    text-align: center;
  }
</style>
